<template>
  <div id="map3d">

  </div>
</template>

<script>
import { reactive, onMounted, watchEffect } from "vue";
import Layer from "./layer";
export default {
  name: "Earth",
  props: [],
  components: {},
  setup() {
    let state = reactive({});
    onMounted(() => {
      init();
      earthEvent();
    });

    watchEffect(() => {});

    return { state };
  }
};

/**
 * 初始化
 */
function init() {
  Layer.init();
  Cesium.Camera.DEFAULT_VIEW_RECTANGLE = new Cesium.Rectangle.fromDegrees(
    85,
    5,
    140,
    65
  );
  let viewer = new Cesium.Viewer("map3d", {
    shouldAnimate: true,
    animation: true,
    infoBox: true,
    selectionIndicator: true,
    geocoder: false,
    fullscreenButton: false,
    timeline: true,
    sceneModePicker: true,
    navigationHelpButton: false,
    baseLayerPicker: false,
    homeButton: true,
    // imageryProvider: defImgProvider(),
    // terrainProvider: defTerrainProvider(),
    orderIndependentTranslucency: true
  });
  window.viewer = viewer;

  Layer.addLayer({
    type: Layer.LayerType.XYZ,
    url: "http://mt{s}.google.cn/vt/lyrs=m&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali",
    subdomains: "0123"
  });

  Layer.addLayer({
    type: Layer.LayerType.D3TILES,
    url: "http://localhost:8090/out/tileset.json"
  });
}

/**
 * 地球事件处理
 */
function earthEvent() {}
</script>

<style scoped>
#map3d {
  height: 100%;
}
</style>
